/* 勾股OA前端主样式文件 */

/* 导入样式变量和混入 */
@use './variables' as *;
@use './mixins' as *;
@use './components' as *;

/* 导入通用样式 */
@use './common' as *;

/* 导入抽屉内容样式 */
@use './drawer-content' as *;

/* Element Plus 主题定制 */
@import 'element-plus/theme-chalk/index.css';

/* 自定义Element Plus样式覆盖 */
:root {
  --el-color-primary: #409eff;
  --el-color-success: #67c23a;
  --el-color-warning: #e6a23c;
  --el-color-danger: #f56c6c;
  --el-color-info: #909399;

  --el-font-size-base: 14px;
  --el-border-radius-base: 4px;
  --el-box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

/* 布局样式 */
.app-container {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.main-container {
  margin-left: 210px;
  min-height: 100vh;
  transition: margin-left 0.28s;

  &.hideSidebar {
    margin-left: 54px;
  }
}

.sidebar-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  overflow: hidden;
  transition: width 0.28s;
  width: 210px;

  &.hideSidebar {
    width: 54px;
  }

  .scrollbar-wrapper {
    overflow-x: hidden !important;
  }
}

/* 移动端适配 */
.mobile {
  .main-container {
    margin-left: 0px;
  }

  .sidebar-container {
    transition: transform 0.28s;
    width: 210px !important;

    &.hideSidebar {
      pointer-events: none;
      transition-duration: 0.3s;
      transform: translate3d(-210px, 0, 0);
    }
  }

  &.hideSidebar {
    .fixed-header {
      width: 100%;
    }
  }
}

/* 页面动画 */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.5s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 面包屑动画 */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all 0.5s;
}

.breadcrumb-enter,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}

.breadcrumb-move {
  transition: all 0.5s;
}

.breadcrumb-leave-active {
  position: absolute;
}
